import Button from '@mui/material/Button';
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@mui/material/DialogContentText';
import DialogTitle from '@mui/material/DialogTitle';
import { useState, useEffect } from 'react';
import { useCalendarApp, ScheduleXCalendar } from '@schedule-x/react';
import { useNavigate } from 'react-router-dom';
import Fab from '@mui/material/Fab';
import AddIcon from '@mui/icons-material/Add';
import { bookingService } from '../../services';
import { createViewDay, createViewMonthAgenda, createViewMonthGrid, createViewWeek } from '@schedule-x/calendar';
import { createEventsServicePlugin } from '@schedule-x/events-service';
import '@schedule-x/theme-default/dist/index.css';
import BookingForm from './components/BookingForm';
import useMediaQuery from '@mui/material/useMediaQuery';
import { useTheme } from '@mui/material/styles';
import { useMessage } from '../../hooks';

export default function Bookings() {
	const eventsService = useState(() => createEventsServicePlugin())[0];
	const { showError } = useMessage();
	const [loading, setLoading] = useState(true);
	const navigate = useNavigate();
	const [open, setOpen] = useState(false);
	const [event, setEvent] = useState(null);
	const [option, setOption] = useState({ mode: 'create', variant: 'page', title: 'Edit Booking' });
	const theme = useTheme();
	const fullScreen = useMediaQuery(theme.breakpoints.down('md'));
	const onClose = () => {
		setOpen(false);
	};
	const calendar = useCalendarApp({
		views: [createViewDay(), createViewWeek(), createViewMonthGrid(), createViewMonthAgenda()],
		plugins: [eventsService],
		callbacks: {
			onDoubleClickDateTime: (date) => {
				setOption({ mode: 'create', variant: 'dialog', title: 'Create Booking' });
				setEvent(date);
				setOpen(true);
			},

			onEventClick: (event) => {
				setOption({ mode: 'edit', variant: 'dialog', title: 'Edit Booking' });
				setEvent(event);
				setOpen(true);
			}
		}
	});
	const fetchData = async () => {
		setLoading(true);
		try {
			const response = await bookingService.getAllBookings();
			eventsService.set(response);
		} catch (err) {
			showError(err || 'get data error');
		} finally {
			setLoading(false);
		}
	};
	useEffect(() => {
		fetchData();
		//eventsService.getAll()
	}, []);

	if (loading) return <div>Loading...</div>;
	return (
		<div>
			<Fab variant='extended' size='medium' color="primary" aria-label="add" align="right" sx={{ position: 'absolute', top: 180, right: 30 }}>
				<AddIcon onClick={() => navigate('/booking-create')} align="right" /> Add
			</Fab>
			<ScheduleXCalendar calendarApp={calendar} />
			<Dialog
				fullScreen={fullScreen}
				open={open}
				onClose={onClose}
				maxWidth="md"
				fullWidth={true}
				aria-labelledby="alert-dialog-title"
				aria-describedby="alert-dialog-description">
				<DialogTitle id="alert-dialog-title">
					{option.title}
				</DialogTitle>
				<DialogContent>
					<BookingForm
						booking={event}
						mode={option.mode}
						variant={option.variant}
						onSave={async (data) => {
							try {
								option.mode === 'create' ? await bookingService.createBooking(data) :
									await bookingService.updateBooking(data);
								onClose();
								fetchData();
							} catch (err) {
								showError(err || 'save data error');
							}
						}}
						onDelete={async (data) => {
							try {
								await bookingService.deleteBooking(data.id);
								onClose();
								fetchData();
							} catch (err) {
								showError(err || 'delete data error');
							}
						}}
						onCancel={onClose}
						saveButtonText="保存"
					/>
				</DialogContent>
				{/* <DialogActions>

					<Button onClick={onClose}>Cancel</Button>
					<Button onClick={onClose}>Delete</Button>
					<Button onClick={onClose} autoFocus>
						Save
					</Button>
				</DialogActions> */}
			</Dialog>
		</div>
	);
}
